<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <title>Document</title>
</head>
<body>
  <button id="btn">发请求</button>

  <script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click', () => {
      // $.ajax({
      //   method: 'get',
      //   url: 'http://localhost:3000/home',
      //   success(res) {
      //     console.log(res);
      //   }
      // })

      // jsonp
      function jsonp({ url, callback }) {
        return new Promise((resolve, reject) => {
          let script = document.createElement('script')
          window[callback] = function(data) {  // 还没执行
            resolve(data)  // show函数的参数
            document.body.removeChild(script)
          }
          script.src = `${url}?callback=${callback}`  // <script src="http://localhost:3000/home?callback='show'">
          document.body.appendChild(script)  // script标签只要出现在了body里，浏览器就会自动加载其src中的资源
        })
      }

      jsonp({
        url: 'http://localhost:3000/home',
        callback: 'show'
      })  // 后端会返回一个 show()，导致了window上的show函数执行了
      .then(data => {
        console.log(data);

        // 拿到了数据之后的操作
      })
    })

    // xss
    // <script src="http://localhost:3000/home?callback='show'">
  </script>
</body>
</html>